import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { LogOutIcon, User2Icon } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useUserStore } from "@/stores";
import { useLogout } from "@/hooks/use-logout";
import { useState } from "react";
import { isUrl } from "@/lib/utils";
export default function HeaderUser() {
  const { t } = useTranslation();
  const { user } = useUserStore();
  const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
  const { logout, isLoggingOut } = useLogout();

  const handleLogout = () => {
    logout();
    setIsLogoutDialogOpen(false);
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Avatar className="h-8 w-8 rounded-full grayscale hover:cursor-pointer">
          {user?.image ? <AvatarImage
            src={isUrl(user?.image as string) ? user?.image : `/api/file/image/${user?.image}`}
            alt="user"
          /> : null}
          <AvatarFallback className="rounded-lg">
            {user?.name.charAt(0).toUpperCase()}
          </AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-auto" align="start">
        <DropdownMenuGroup>
          <div className="flex gap-2 items-center p-2">
            <Avatar className="h-8 w-8 rounded-lg grayscale">
              {user?.image ? <AvatarImage
                src={isUrl(user?.image) ? user?.image : `/api/file/image/${user?.image}`}
                alt="user"
              /> : null}
              <AvatarFallback className="rounded-lg">
                {user?.name.charAt(0).toUpperCase()}
              </AvatarFallback>
            </Avatar>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-medium">{user?.name}</span>
              <span className="text-muted-foreground truncate text-xs">
                {user?.email}
              </span>
            </div>
          </div>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <Link to="/cas/profile">
            <DropdownMenuItem className="hover:cursor-pointer">
              {t("Profile", { defaultValue: "Profile" })}
              <DropdownMenuShortcut>
                <User2Icon />
              </DropdownMenuShortcut>
            </DropdownMenuItem>
          </Link>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <AlertDialog open={isLogoutDialogOpen} onOpenChange={setIsLogoutDialogOpen}>
          <AlertDialogTrigger asChild>
            <DropdownMenuItem
              className="hover:cursor-pointer"
              onSelect={(e) => e.preventDefault()}
            >
              {t("Log out", { defaultValue: "Log out" })}
              <DropdownMenuShortcut>
                <LogOutIcon />
              </DropdownMenuShortcut>
            </DropdownMenuItem>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>{t("Confirm Logout", { defaultValue: "Confirm Logout" })}</AlertDialogTitle>
              <AlertDialogDescription>
                {t("Are you sure you want to log out?", { defaultValue: "Are you sure you want to log out?" })}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel disabled={isLoggingOut} className="hover:cursor-pointer">
                {t("Cancel", { defaultValue: "Cancel" })}
              </AlertDialogCancel>
              <AlertDialogAction
                onClick={handleLogout}
                disabled={isLoggingOut}
                className="bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:cursor-pointer text-primary-foreground"
              >
                {isLoggingOut ? t("Logging out...", { defaultValue: "Logging out..." }) : t("Log out", { defaultValue: "Log out" })}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
